<template>
  <div class="layer-box">
    <div class="check-box">
      <div class="layer-item">
        <n-checkbox
          v-model:checked="layer1"
          @update:checked="toggleLayer1"
        />
        <span @click="toLayer1">村界调查区</span>
      </div>
      <div class="layer-item">
        <n-checkbox
          v-model:checked="layer2"
          @update:checked="toogleDLTB"
        />
        <span @click="toLayer2">地类图斑</span>
      </div>
      <div class="layer-item">
        <n-checkbox
          v-model:checked="layer3"
          @update:checked="toogleXZQ"
        />
        <span @click="toLayer3">行政区</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import {NCheckbox, } from "naive-ui"
import {defineComponent, ref, onMounted} from "vue"
import {onBeforeRouteLeave} from "vue-router"

defineComponent(  {
  NCheckbox
})
const layer1 = ref()
const layer2 = ref()
const layer3 = ref()

// 挂载时获取图层选项
onMounted(()=>{
  layer1.value = window.layer1 ? window.layer1 : null
  layer2.value = window.layer2 ? window.layer2 : null
  layer3.value = window.layer3 ? window.layer3 : null
})

/*XZQ图层切换*/
const toggleLayer1 = (checked) => {
  if(checked){
    loadCJDCQ()
  } else {
    window.viewer.imageryLayers.remove(window.CJDCQ)
  }
}
const loadCJDCQ = () => {
  let a = new Cesium.WebMapServiceImageryProvider({
    url: "http://www.hydlxx.com:8080/geoserver/hywebgis/wms",
    layers: "hywebgis:CJDCQ",
    parameters: {
      service: "WMS",
      format: "image/png",
      transparent: true,
      // opacity : 1,
    },
  });
  window.CJDCQ = window.viewer.imageryLayers.addImageryProvider(a)
  // window.viewer.imageryLayers.raiseToTop(a)
}
const toLayer1 = () => {
  window.viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(124.83301, 41.58703, 5000)
  })
}

/*地类图斑图层切换*/
const toogleDLTB = (checked) => {
  if(checked){
    loadDLTB()
  } else {
    window.viewer.imageryLayers.remove(window.DLTB)
  }
}

const loadDLTB = () => {
  const b = new Cesium.WebMapServiceImageryProvider({
    url: 'http://www.hydlxx.com:8080/geoserver/hywebgis/wms',
    layers: 'hywebgis:DLTB',
    parameters: {
      service: 'WMS',
      format: 'image/png',
      transparent: true,
    }
  })
  window.DLTB = window.viewer.imageryLayers.addImageryProvider(b)
}

const toLayer2 = () => {
  window.viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(125.03815, 41.62994, 5000)
  })
}

/*行政区图层切换*/
const toogleXZQ = (checked) => {
  if(checked){
    loadXZQ()
  } else {
    window.viewer.imageryLayers.remove(window.XZQ)
  }
}

const loadXZQ = () => {
  const c = new Cesium.WebMapServiceImageryProvider({
    url: 'http://www.hydlxx.com:8080/geoserver/hywebgis/wms',
    layers: 'hywebgis:XZQ',
    parameters: {
      service: 'WMS',
      format: 'image/png',
      transparent: true,
    }
  })
  window.XZQ = window.viewer.imageryLayers.addImageryProvider(c)
}

const toLayer3 = () => {
  window.viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(125.25787, 41.67114, 5000)
  })
}

onBeforeRouteLeave((to,from,next)=>{
  if(to.name === "location"){
    window.layer1 = layer1.value ? layer1.value : null
    window.layer2 = layer2.value ? layer2.value : null
    window.layer3 = layer3.value ? layer3.value : null
  }
  next()
})

</script>

<style scoped lang="less">
.layer-box{
  position: absolute;
  z-index: 999;
  color: white;
  height: 81%;
  width: 19.3%;
  top: 16%;
  padding-left: 1.5vw;
  box-sizing: border-box;
  margin-top: 2vh;
  //border: 1px solid;
  left: 1%;
  background-color: rgba(224,255,255,.3);
  border-radius: 5px;
  padding-top: 2vh;
  .layer-item{
    margin-top: .5vh;
    text-align: left;
    span{
      margin-left: .5vw;
    }
  }
}
/deep/.n-checkbox .n-checkbox__label {
  color: white !important;
  margin-left: 0.5vw !important;
}
</style>